import { h, Component } from 'preact';
import ReactModal from 'react-modal';
import elementClass from 'element-class';
import classNames from 'classnames';
import s from './Modal.scss';

const style = {
	overlay : {
		position          : 'fixed',
		top               : 0,
		left              : 0,
		right             : 0,
		bottom            : 0,
		backgroundColor   : 'rgba(0, 0, 0, 0.45)'
	},
	content : {
		position                   : 'absolute',
		//top                        : '20%',
		width                      : '80%',
		//left                       : '10%',
		right                      : '10%',
		bottom                     : 'auto',
		minHeight                  : '20%',
		maxHeight                  : '80%',
		border                     : 'node',
		background                 : '#fff',
		overflow                   : 'auto',
		WebkitOverflowScrolling    : 'touch',
		borderRadius               : '1rem',
		outline                    : 'none',
		padding                    : '0',
		top: '50%',
		left: '50%'
	}
};

export default class Modal extends Component {
	render() {
		const { onRequestClose, children, className } = this.props;
		const combineStyle = { overlay: { ...style.overlay, ...this.props.style.overlay}, content: { ...style.content, ...this.props.style.content}};
		const containerClass = classNames( className ,s.warp);
		return (
			<ReactModal
				shouldCloseOnOverlayClick={false}
				{ ...this.props }
				style={combineStyle}
				className={containerClass}
			>
				{onRequestClose ? <button className={s.close} onClick={onRequestClose}>关闭</button> : null}
				{children}
			</ReactModal>
		);
	}
}
